// rec
import React, { useState, useEffect } from "react";
import { Button, Form, Input, Spin, Card, message, Radio } from "antd";
import { MailOutlined, LockOutlined } from "@ant-design/icons";
import { useNavigate, Link } from "react-router-dom";
import "./login.css";
import { _register } from "../util/api";

function Login() {
  const [isShow, setIsShow] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const navigate = useNavigate();

  useEffect(() => {}, []);

  const onFinish = (userData) => {
    setIsLoading(true);
    const user_type = userData.user_type;
    const user_email = userData.user_email;

    const isadmin = user_email.split("@")[0];

    const tempdata = {
      user_email: user_email,
      user_pwd: userData.user_pwd,
    };
    _register(tempdata)
      .then((res) => {
        if (res.status === 200 && res.data.code == 0) {
            setIsLoading(false);
            if (res.data.data.code == 0) {
              message.success("注册成功", 1).then(() => {
                navigate("/login");
              });
            } else {
              setIsLoading(false);
              message.info("改用户已存在");
            }
         
        } 
      })
      .catch((e) => {
        console.log(e);
        setIsLoading(false);
        message.error("服务器错误");
      });
  };

  return (
    <div className="login-div">
      <Spin tip="Loading..." spinning={isLoading}>
        <Card title="新用户注册" bordered={true} style={{ width: 400 }}>
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
          >
            <Form.Item
              name="user_email"
              rules={[
                {
                  type: "email",
                  message: "此邮箱无效!",
                },
                {
                  required: true,
                  message: "请输入你的邮箱!",
                },
              ]}
            >
              <Input
                prefix={<MailOutlined className="site-form-item-icon" />}
                placeholder="邮箱"
                size="large"
              />
            </Form.Item>
            <Form.Item
              name="password"
              prefix={<LockOutlined className="site-form-item-icon" />}
              rules={[
                {
                  required: true,
                  message: "请输入密码!",
                },
              ]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                size="large"
                placeholder="密码"
              />
            </Form.Item>
            <Form.Item
              name="user_pwd"
              dependencies={["password"]}
              hasFeedback
              rules={[
                {
                  required: true,
                  message: "请输入确认密码!",
                },
                ({ getFieldValue }) => ({
                  validator(rule, value) {
                    if (!value || getFieldValue("password") === value) {
                      return Promise.resolve();
                    }

                    return Promise.reject("俩次输入密码不同!");
                  },
                }),
              ]}
            >
              <Input.Password
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="确认密码"
                size="large"

                // minLength={6}
              />
            </Form.Item>

            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                className="login-form-button"
                block
                size="large"
              >
                注册
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </Spin>
    </div>
  );
}

export default Login;
